<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar :title="title" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view class="top-view">
			 <u-scroll-list  :indicator="false">
			    <view v-for="(item, index) in merchantInfo.sceneImgs" :key="index">
			      <image @click="imgClick(item)" class="img" :src="item"></image>
			    </view>
			 </u-scroll-list>
			 
			 <view class="flex-row justify-between items-center m-item">
			 	
			 	<view class="left">
			 		<text style="font-size: 26rpx;color: #999;">{{merchantInfo.distance_km}}</text>
			 		<text class="name-text" style="font-size: 26rpx;color: #999;">{{merchantInfo.cust_addr}}</text>
			 	</view>
			 	
			 	
			 	<view class="right" @click="toMerchant">
			 		<u-icon name="map-fill"></u-icon>
					<text>导航</text>
			 	</view>
			 </view>
		</view>
		
		<!-- <text style="margin-left: 22rpx;">门店信息</text>
		
		<view class="info-body">
			{{merchantInfo.info ? merchantInfo.info : ''}}
		</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				merchant_id:'',
				merchantInfo:{}
			};
		},
		onLoad(op) {
			this.title = op.title;
			this.merchant_id = op.id;
			this.getMerchantInfo();
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		methods:{
			imgClick(url){
				uni.previewImage({
					urls:[url],
				})
			},
			toMerchant(){
				uni.openLocation({
					latitude: Number(this.merchantInfo.latitude),
					longitude: Number(this.merchantInfo.longitude),
					name: this.merchantInfo.merchant_name,
					address: this.merchantInfo.cust_addr,
					scale: 15,
					navigate: true // 是否显示导航

				})
			},
			getMerchantInfo(){
				let cur = uni.getStorageSync('local')
				this.$request({
					url:'?c=MerchantOffline&a=merchantInfo',
					type:'post',
					data:{
						merchant_id:this.merchant_id,
						lon:cur.lon,
						lat:cur.lat
					}
				}).then(res =>{
					// console.log(res)
					this.merchantInfo = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.top-view{
	background-color: #fff;
	border-radius: 10rpx;
	margin: 20rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	.img{
		width: 250rpx;
		height: 180rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}
}
.m-item{
	width: 100%;
	background-color: #fff;
}
.left{
	display: flex;
	flex-direction: row;
	align-items: center;
	// justify-content: flex-start;
	width: 80%;
	.name-text{
		margin-left: 15rpx;
		width: 100%;
	    flex: 1;
	}
}
.right{
	display: flex;
	width: 20%;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: flex-end;
	// margin-right: 20rpx;
	padding-left: 20rpx;
	font-size: 25rpx;
	color: #999;
}
.info-body{
	background-color: #fff;
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;
	min-height: 300rpx;
}
</style>
